<template>
  <div class="container">
    <h1 class="title">请先登录 祝您愉快</h1>
    <el-form status-icon :model="ruleForm"  :rules="rules" ref="ruleForm" class="ruleForm">
        <el-form-item  prop="username">
            <el-input  type="text" v-model="ruleForm.username" placeholder="请输入用户名" size="medium" name="username" prefix-icon="el-icon-location">
              <template slot="prepend">用户名</template>
            </el-input>
        </el-form-item>
        <el-form-item prop="pwd" required>
            <el-input type="password" v-model="ruleForm.pwd" placeholder="请输入密码" size="medium" name="password" prefix-icon="el-icon-location">
              <template slot="prepend">密&nbsp;&nbsp;&nbsp;码</template>
            </el-input>
        </el-form-item>
        <!-- <el-form-item prop="ident" required>
          <el-row>
            <el-col :span="12">
              <el-input type="text" v-model="ruleForm.ident" placeholder="验证码" size="medium" name="password">
              </el-input>
            </el-col>
            <el-col :span="12">
              <img :src="picSrc" alt="" @click="changePic">
            </el-col>
          </el-row>
        </el-form-item> -->
        <el-form-item>
          <el-row>
            <el-col>
              <el-button type="primary" round plain :loading="loading" @click="submit('ruleForm')">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
            </el-col>
          </el-row>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { toRouter } from "@/api/common/common";
import axios from "axios";
import { mapMutations, mapGetters } from "vuex";
export default {
  data() {
    const UNLAW = /[^\w\u4e00-\u9fa5]/g;
    const DOUBLE = /[^\x00-\xff]/g;
    var checkUsername = (rule, value, callback) => {
      let len = value.replace(DOUBLE, "xx").length;
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else if (UNLAW.test(value)) {
        return callback(new Error("用户名不能出现非法字符"));
      } else if (len < 5 || len > 25) {
        return callback(
          new Error("用户名长度为5-25个字符，一个汉字占2个字符，推荐中文名")
        );
      } else {
        return;
      }
    };
    return {
      ruleForm: {
        username: "",
        pwd: "",
        ident: ""
      },
      rules: {
        username: [
          {
            message: "shuru",
            trigger: "blur"
          }
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        ident: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      },
      loading: false,
      toRouter: toRouter,
      picSrc: `http://apitest.zhongxiangtianxia.cn/api/login/checkverify.html?tm=${Math.random()}`
    };
  },
  methods: {
    submit(form) {
      let that = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          console.log("111");
          let locale = {
            user_name: this.ruleForm.username,
            password: this.ruleForm.pwd
          };
          const url = "api/login/dologin.html";
          axios
            .post(url, locale)
            .then(res => {
              if (res.data.code === 1) {
                this.$notify({
                  title: "提示",
                  message: "登录成功！",
                  position: "top-left"
                });
                let responseData = res.data.data;
                this.setPerson(responseData);
                console.log(responseData);
                this.$cookie.set("token", responseData.huser_name);
                localStorage.setItem(
                  "loginMsg",
                  JSON.stringify(responseData)
                );
                this.$router.push("/project");
              } else {
                this.$notify({
                  title: "提示",
                  message: "用户名或密码错误，登录失败！",
                  position: "top-left"
                });
              }
            })
            .catch(e => {
              console.log(e);
            });
        }
      });
    },
    changePic() {
      this.picSrc = `http://apitest.zhongxiangtianxia.cn/api/login/checkverify.html?tm=${Math.random()}`;
    },
    ...mapMutations({
      setPerson: "SET_PERSONAL"
    })
  },
  computed: {}
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.container
  width 400px
  margin 0 auto
  text-align center
  padding-top 290px
  z-index 100
  .title
    font-weight 700
    padding 20px
    letter-spacing 5px
    color white
</style>
